<template>
  <div class="weather-header">
    <div class="title" @click="viewHome">
      <i :class="`iconfont icon-taiyang`"></i>
      <p>新中地天气预报</p>
    </div>
    <div class="info">
      <h4>广州市</h4>
      <span>实时天气：阴 28℃</span>
      <span>西风≤3级</span>
    </div>
    <div class="weather-icon">
      <i
        id="iconfont2"
        :class="`iconfont2 icon-gantanhaozhong`"
        @click.stop="toggleMessage"
      ></i>
      <i
        id="iconfont3"
        :class="`iconfont3 icon-jiahao`"
        v-if="isCityInfoRoute"
      ></i>
    </div>
    <!-- 信息框 -->
    <div v-show="showMessage" class="message-box">
      <h2>关于:</h2>
      <p>这个应用可以用来追踪你选择城市的当前天气</p>
      <h2>如何使用:</h2>
      <p>
        1.点击搜索框输入你希望追踪的城市<br />
        2.在搜索结果中选中一个城市，你将获取当地最新的天气<br />
        3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
      </p>
      <h2>移除城市:</h2>
      <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
      <button @click="toggleMessage" style="align-items: center">关闭</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";

const showMessage = ref(false);

const route = useRoute();
const toggleMessage = () => {
  showMessage.value = !showMessage.value;
};

const router = useRouter();

const isCityInfoRoute = computed(() => route.name === "cityinfo");

const viewHome = () => {
  // 使用router.push进行路由跳转
  router.push({
    name: "home",
  });
};
</script>

<style lang="scss" scoped>
@import "@/icon/font_4903909_ksssq4b9io.css";
@import "@/icon/gantanhao.css";
@import "@/icon/jiahao.css";

.weather-header {
  display: flex;
  height: 28px;
  width: 1216px;
  margin: 0 auto;
  gap: 20px;
  align-items: center;
  justify-content: center;

  .message-box {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-30%, -50%);
    z-index: 9999;
    width: 250px;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    color: #333;

    h2 {
      font-size: 14px;
    }

    p {
      font-size: 12px;
    }

    button {
      margin: 0 auto;
      display: block;
    }
  }

  .title {
    display: flex;
    gap: 10px;
    height: 32px;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    color: white;
    cursor: pointer;
  }

  .info {
    display: flex;
    height: 28px;
    white-space: nowrap;
    align-items: center;
    gap: 16px;
    color: white;

    h4 {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
    span {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }
  .weather-icon {
    display: flex;
    flex: 1;
    gap: 10px;
    height: 28px;
    justify-content: flex-end;

    // 为图标添加悬停动画
    i#iconfont2,
    i#iconfont3 {
      color: white;
      transition: all 0.3s ease; // 过渡动画
      cursor: pointer;

      &:hover {
        color: black; // 悬停颜色
        transform: scale(1.2); // 附加放大效果
      }
    }
  }
}
</style>
